import React, { Component } from 'react'
import {getlist,detele} from './api/index'
export default class App extends Component {
  state={
    list:[]
  }
async componentDidMount(){
    let res=await getlist()
    // console.log(res.data)
    this.setState({
      list:res.data.res
    })
  }
  render() {
    let {list}=this.state
    // console.log(list)
    return (
      <div>
        {
          list&&list.map(item=>{
            return <li key={item.id}>
                用户名：{item.name} 密码：{item.pwd} 
                <button onClick={()=>this.props.history.push({
                  pathname: '/open',
                  state: {
                    id:item.id //同样，可以通过state向对应路由对应的组件传递参数
                  }
                })}>编辑</button> 
                <button onClick={()=>this.delete(item.id)}>删除</button>
            </li>
          })
        }
        <button onClick={()=>this.props.history.push('/open')}>添加</button>
      </div>
    )
  }
  delete=async (id)=>{
    await detele({id})
    let {list}=this.state
    list.splice(list.findIndex(item=>item.id==id),1)
    this.setState({
      list
    })
  }
}
